<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地服务</title>
    <style>
        #content{
            list-style: auto;
        }
    </style>
</head>
<body>
<h3 style="text-align: center">本地服务</h3>
<div style="display: flex">
    <div>
        <ul id="ul"></ul>
    </div>
    <div>
        <ul id="content"></ul>
    </div>
</div>

</ul>
</body>
<script>
    let data = [];
    let showData = []
    const appendEl = (_data,type)=>{
        const li = document.createElement('li')
        const a = document.createElement('a')
        const el = type === 'nav' ? 'ul' : 'content'
        if(type !== 'nav'){
            a.setAttribute('href',_data.path)
            a.setAttribute('target','_blank')
        }else {
            a.addEventListener('click',()=>{
                document.getElementById('content').innerHTML = null
                setData(_data.paths)
            })
        }
        a.innerText = _data.name
        li.appendChild(a)

        document.getElementById(el).appendChild(li)
    }
    const setData = (data,type) =>{
        data.forEach((item)=>{
            appendEl(item,type)
        })
    }
    const setNav = (data) =>{
        setData(data,'nav')
    }
    fetch('./resource.json').then((res)=> res.json()).then((res)=>{
        data = res
        setNav(data)
    })
</script>
</html>
